<template>
    <el-card>
        <el-breadcrumb :separator-icon="ArrowRight" class="bread">
            <el-breadcrumb-item v-for="(item, index) in crumbs" :key="index" :to="{ path: item.path, query: query }">
                {{item.title}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-card>
    <el-card>
        <el-link type="primary" style="margin-right: 20px;font-weight: 700;" :underline="false">{{ echartTitle.title }}</el-link>
        <el-table v-loading="loading" :data="variantList" stripe style="width: 100%">
            <el-table-column prop="variant_value" label="传感器数据" />
            <el-table-column prop="update_time" label="数据更新时间" />
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top:20px" :current-page="searchForm.page" :page-size="searchForm.page_size"
            layout="->,total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </el-card>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { variant } from '../api/index';
import { useRoute, useRouter } from 'vue-router'
import { echartTitleStore } from '../stores/index';

const echartTitle = echartTitleStore();
const loading = ref(true);
const route = useRoute();
const router = useRouter();
const variantList = ref([]);
const query = ref({
    "boxId": window.sessionStorage.getItem("boxId"),
    "id": window.sessionStorage.getItem("id")
});


const crumbs = ref([
    {
        "path": "/projects",
        "title": "项目列表"
    },
    {
        "path": "/projects/box",
        "title": "项目详情"
    },
    {
        "path": "/projects/box/variant",
        "title": "项目数据列表"
    },
])

let total = ref(0);
const searchForm = reactive({
    id: route.query.id,
    page: 1,
    page_size: 15
});

const getVariantList = async () => {
    console.log(route.matched)
    window.sessionStorage
    try {
        const res = await variant(searchForm);
        if (res.status === 2000) {
            variantList.value = res.data;
            total.value = res.total;
        } else {
            ElMessage.error(res.message);
        }
    } catch (error) {

    } finally {
        loading.value = false
    }

}
// 执行
getVariantList();

// 跳页码
const handleCurrentChange = (page) => {
    searchForm.page = page;
    getVariantList();
}
</script>
<style>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}


.loading-spinner {
    animation: rotate 1s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
  
  